import { useContext } from 'react';
import { Menu } from 'antd';
import { FolderOpenOutlined } from '@ant-design/icons';

import './leftmenu.scss'

import menuData from './leftmenu.json'
import { MyContext } from '../../Store';

const { SubMenu } = Menu;
const data = menuData.data

export default function LeftMenu() {

    const { dispatch } = useContext(MyContext)

    return (
        <Menu
            className='guide_left_menu'
            style={{ width: 160 }}
            mode="inline"
            defaultOpenKeys={data.map(item => String(item.id))}
            defaultSelectedKeys={[String(data[0].child[0].id)]}
        >
            {
                data.map(item => {
                    return (
                        <SubMenu
                            key={item.id}
                            icon={<FolderOpenOutlined />}
                            title={item.title}
                        >
                            {
                                item.child && item.child.map(childItem => {
                                    return <Menu.Item
                                        key={childItem.id}
                                        onClick={() => dispatch({ type: 'set', value: require(`../../markdown/${childItem.file}.md`).default })}
                                    >{childItem.title}</Menu.Item>
                                })
                            }
                        </SubMenu>
                    )
                })
            }
        </Menu>
    )
}
